<!--  -->
<template>
   <a-spin :spinning="spinning">

     <div style="width: 100%;    display: flex; justify-content: center; align-items: flex-start; flex-direction: column;">
       <p-PageForm ref="caiForm" :showHelp="false" v-bind="caiConfig" :PEvent="PEvent"></p-PageForm>
       <div v-if="model=='edit'" style="width: calc((100% / 24) * 16); display: flex; justify-content: center; align-items: center;">
         <a-button type="primary" :disabled="disabled"  @click="AccountVerification"> 账户信息核验 </a-button>
       </div>
     </div>
   </a-spin>
</template>
<!-- :disabled="!AVRes" -->
<script>
import getDataForDB from '@/api/qsbBusinessManagement'
import BankBox from './BankBox.vue'
import UUID from '@/utils/uuid'
const getFormRules=()=>{
  return {
    'bankName':[
      { required: true, message: '请输入开户行', trigger: 'blur' },
    ],
    'accNo':[
      { required: true, message: '请输入银行账号', trigger: 'blur' },
    ],
  }
}
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'CorporateAccountInformation',
  components: {},
  props: {
    value: {type: Object},
    disabled:{type:Boolean},
    // 当前组件模式  view 表示预览模式  edit  表示可编辑模式
    model:{type:String, default:'edit'},
    // 法人信息  {name:'', phone:'', cardNum:''}  protocolType 企业合作模式  当值为 2 时进行校验
    legalInfo:{type:Object},
    defaultLayout:{type:Object, default:()=>{ return {rowNum: 4, columnNum: 1, rowGap: "1px", rowHeight:'100px', coliumnGap: "0px", labelCol: { span: 2 }, wrapperCol: { span: 14 }}}}
  },
  data() {
    // 这里存放数据
    return {
      spinning:false,
      // 核验结果
      AVRes:false,
      tempVal:{},
      caiConfig:{
        layout:{ rowNum: 4, columnNum: 1, rowGap: "1px", rowHeight:'100px', coliumnGap: "0px", labelCol: { span: 2 }, wrapperCol: { span: 14 },},
        formRules: {},//getFormRules(),
        formDataList:[
          { enName:'bankName', cnName:'开户行', type:'custom',value:'',  componentName:'BankBox', componentItem:BankBox,itemAttr:{}},
          { enName:'accNo', cnName:'银行账号', type:'input',value:'', itemAttr:{}}
        ]
      },
      BankInfo:{},
      legalInfoKey:'',
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    model:{
      handler(val){
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          if(val=='view'){
            this.caiConfig.formRules = {}
          } else {
            this.caiConfig.formRules = {} // getFormRules()
          }
        }
      },
      immediate:true
    },
    defaultLayout:{
      handler(val){
        // {userName2:{:'',name:''},userName3:{url:'',name:''}}
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          this.caiConfig.layout = Object.assign({},this.caiConfig.layout,val)
        }
      },
      deep:true,
      immediate:true
    },
    value:{
      handler(val){
        const tempData = {
          '0':'custom',
          '1':'input',
        }
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          this.caiConfig.formDataList.forEach((item,index)=>{
            const {enName} = item
            let temp = val[enName]
            // if(!this.$IS.isNullOrUnDef(val[enName]) && !this.$IS.isEmpty(val[enName])){
            //   temp = val[enName]
            // }
            if(this.model=='view'){
              this.caiConfig.formDataList[index].type = 'label'
            } else {
              this.caiConfig.formDataList[index].type = tempData[index]
            }
            this.caiConfig.formDataList[index].value = temp
            this.tempVal[enName] = temp
          })
        }
      },
      deep:true,
      immediate:true
    },
    disabled:{
      handler(val){
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          this.caiConfig.formDataList.forEach((item,index)=>{
            if(val !='view'){
              this.caiConfig.formDataList[index].itemAttr['disabled'] = val
            }
          })
        }
      },
      immediate:true
    },
    legalInfo:{
      handler(val){
        const tenpStr = UUID('MDUUID',JSON.stringify(val))
        // console.log('@@@@@@@@@@@@@@@@@@@@@@@22',val,this.legalInfoKey,tenpStr);
        if(this.legalInfoKey != tenpStr){
          !this.$IS.isEmpty(this.legalInfoKey) && this.clearFormVal()
          this.legalInfoKey = tenpStr
        }
      },
      deep:true,
      immediate:true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    PEvent(type,item,data){
      if(type=='formChange'){
        this.upDateVal(data)
      }
      console.log('form Event ====>',type,item,data);

    },
    checkFiledIsEmpty(formVal){
      let res = true
      Object.keys(formVal).forEach(key=>{
        if(!this.$IS.isNullOrUnDef(formVal[key]) && !this.$IS.isEmpty(formVal[key])){
          res = false
        }
      })
      return res
   },
    upDateVal(formVal){
      this.tempVal = formVal
      const isAllEmpty = this.checkFiledIsEmpty(formVal)
      const tempRes = {...formVal,AVRes:this.AVRes,isAllEmpty}
      this.$emit('change.value', tempRes)
      this.$emit('change', tempRes);
      this.$emit('input', tempRes);
    },
    clearFormVal(){
      if(this.model=='view'){
        return false
      }
      this.AVRes = false
      // 清空数据
      const tempRes = {}
      this.caiConfig.formDataList.forEach((item,index)=>{
        const {enName} = item
        tempRes[enName] = ''
      })
      // 当核验失败后调用
      this.upDateVal(tempRes)
    },
    AccountVerification(){
      this.$refs['caiForm'].onSubmit((formRes)=>{
        this.spinning = true
        const param = {bankCard:this.tempVal['accNo'],legalName:this.legalInfo.legalName, legalCard:this.legalInfo.cardNumber}
        getDataForDB('企业银行卡三要素验证',param).then(res=>{
          if (res.success) {
            if (res.result==true){
              this.AVRes = true
              this.upDateVal(formRes)
              this.$message.success('校验通过！');
            }else{
              this.$message.warning('校验未通过，请重新输入银行账号！');
              this.clearFormVal()
            }
          }else {
            this.$message.warning(res.message);
            this.clearFormVal()
          }
          this.spinning = false
        })
      })
    },
    getBankInfo(data){
      // console.log(data);
      this.BankInfo = data
    },
  },
  }
</script>
<style lang='less' scoped>
</style>
